DiscGolf.Views['pageHeader'] = Backbone.View.extend( {

    events: {

        'click #logoutButton': 'handleLogoutClick'
    },

    redColor: jQuery.Color('red'),
    blueColor: jQuery.Color('blue'),
    yellowColor: jQuery.Color('yellow'),
    greenColor: jQuery.Color('green'),

    initialize: function() {

        this.render();

        this.textColorTransition();
    },

    render: function() {

        this.header =
            this.makeEl( 'div' ).text( 'Fighting Disc Golf' )
                                .css( { 'font-size': '3em' } );

        this.$el.append( this.header )
                .css( { 'position': 'relative',
                        'border-top': '1px solid white',
                        'border-bottom': '1px solid white',
                        'text-align': 'center',
                        'margin': '.25em 0em',
                        'padding': '.25em 0em' } );

        return this;
    },

    textColorTransition: function() {

        var oldColor = jQuery.Color( this.header, 'color' ).toRgbaString();

        var newColor = ( oldColor == this.redColor.toRgbaString() ) ? this.blueColor.toRgbaString()
            : ( oldColor == this.blueColor.toRgbaString() ) ? this.greenColor.toRgbaString()
                : ( oldColor == this.greenColor.toRgbaString() ) ? this.yellowColor.toRgbaString()
                : ( oldColor == this.yellowColor.toRgbaString() ) ? this.redColor.toRgbaString()
                    : this.redColor.toRgbaString();

        this.header.animate( { color: newColor }, 2000, $.proxy( this.textColorTransition, this ) );
    },

    showLoggedInTransition: function() {

        var that = this;

        this.header.animate(
            { 'font-size': '2em' },
            2000,
            function() {
                that.addLogoutButton.call( that );
                that.trigger( 'loggedInTransitionComplete', { pageHeaderHeight: that.$el.outerHeight( true ) } ); } );
    },

    addLogoutButton: function() {

        this.logoutButton =
            this.makeEl('div').css( { 'font-size': '.25em',
                                      'color': 'gray',
                                      'position': 'absolute' } ).text( 'Logout' ) 
                              .attr( { 'id': 'logoutButton', 'class': 'cursorHand' } );

        this.$el.append( this.logoutButton );

        this.logoutButton.css( { 'left': this.$el.outerWidth( true ) - this.logoutButton.outerWidth( true ),
                                 'top': this.$el.outerHeight() - this.logoutButton.outerHeight( true ) } );

        this.delegateEvents(); 
    },

    handleLogoutClick: function() {

        $.ajax( { url: DiscGolf.CommonLib.makeUrl( { controller: 'golfer', argList: [ 'logout' ] } ),
                  type: 'POST',
                  success: $.proxy( this.logout, this ) } );
    },

    logout: function() {
        
        DiscGolf.golferId = null;

        this.logoutButton.hide( 'blind', function() { this.remove(); } );

        this.header.animate( { 'font-size': '3em' }, 2000, $.proxy( this.showLogin, this ) );
    },

    showLogin: function() {
       
        var loginView =
            new DiscGolf.Views['login']( { el: this.makeEl('div').attr( { 'id': 'loginContainer' } ).appendTo( $('body') ).get(0),
                                           golferModel: new DiscGolf.Models['golfer'](),
                                           focus: true,
                                           height: window.innerHeight - this.$el.outerHeight( true ) } );

        this.listenTo( loginView, 'loggedIn', this.showLoggedInTransition );
    }

} );
